<template>
  <div>
    <search-form @search="getTableData" @reset="clearSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[1360]">
        <el-form-item :label="$t('所属租户')">
          <el-select style="width: 100%" v-model="page.tenantId" @change="getGuestGroupList" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1357]">
        <el-form-item :label="$t('客群名称')">
          <el-select style="width: 100%" v-model="page.guestGroupId" @change="getManager">
            <el-option v-for="item in guestGroupList" :key="item.guestGroupId" :label="item.guestGroupName"
                       :value="item.guestGroupId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1598]">
        <el-form-item :label="$t('提醒经理')">
          <el-select style="width: 100%" v-model="page.managerId" @change="getPersonnel" clearable filterable>
            <el-option v-for="item in remindManagerList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1359]">
        <el-form-item :label="$t('提醒员')">
          <el-select style="width: 100%" v-model="page.adminUserId" clearable filterable>
            <el-option v-for="item in auditPersonnelList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户状态')">
          <el-select style="width: 100%" v-model="page.isRepeatedBorrowing" clearable>
            <el-option :label="$t('初借')" :value="0"></el-option>
            <el-option :label="$t('复借')" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('日期')">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              unlink-panels
              range-separator="~"
              value-format="yyyy-MM-dd"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </search-form>
    <el-card shadow="never" style="margin-top: 10px">
      <div style="margin-bottom: 10px;text-align: right" v-show="$permiss[1358]">
        <el-button :loading="exportsLoading" type="primary" @click="exportExcel">{{ $t('导出') }}</el-button>
      </div>
      <Table :table-column="tableColumn" :loading="loading" :table-data="tableData" @handleSizeChange="handleSizeChange"
             @handleCurrentChange="handleCurrentChange" :page="page"/>
    </el-card>
  </div>
</template>

<script>
import {guestGroupBindList, guestGroupList, remindReportExport, remindListReport} from '@/api/postLoan'
import {dateFormatSection, defaultTimeDate} from "@/utils/tools";
import {export_json_to_excel} from "@/utils/exportExcel";
import {selectTenant} from "@/api/system";

export default {
  name: "reminderReportEffect",
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        timeValue: defaultTimeDate(7)
      },
      guestGroupList: [],
      remindManagerList: [],
      tenantList: [],
      exportsLoading: false,
      auditPersonnelList: [],
      tableData: [],
      tableColumn: [
        {label: this.$t('日期'), prop: 'dateStr', align: 'center', minWidth: 100, fixed: 'left'},
        {label: this.$t('排名'), prop: 'rank', align: 'center', minWidth: 100, fixed: 'left'},
        {label: this.$t('客群名称'), prop: 'guestGroupName', align: 'center', minWidth: 100},
        {label: this.$t('提醒员'), prop: 'adminUserName', align: 'center', minWidth: 100},
        {label: this.$t('入催订单数'), prop: 'remindOrderNum', align: 'center', minWidth: 100},
        {label: this.$t('总结清数'), prop: 'settleNum', align: 'center',},
        {label: this.$t('结清率'), prop: 'settleRate', align: 'center',},
        {label: this.$t('展期数'), prop: 'rolloverNum', align: 'center', minWidth: 100},
        {label: this.$t('展期率'), prop: 'rolloverRate', align: 'center',},
        {label: this.$t('综合率'), prop: 'complexRate', align: 'center', minWidth: 100},
        {label: this.$t('当日结清复借数'), prop: 'settleReCnt', align: 'center', minWidth: 120},
        {label: this.$t('当日结清复借率'), prop: 'settleReRate', align: 'center', minWidth: 120},
        {label: this.$t('催记数'), prop: 'reminderNum', align: 'center', minWidth: 100},
        {label: this.$t('平均催记数'), prop: 'averageReminderRate', align: 'center', minWidth: 100},
      ],
      loading: false
    }
  },
  async mounted() {
    this.$permiss[1598] && this.getManager()
    this.$permiss[1359] && this.getPersonnel()
    await selectTenant().then(res => {
      this.tenantList = res.data
      if (this.tenantList.length > 0) this.$set(this.page, 'tenantId', this.tenantList[0].adminUserId)
    })
    await guestGroupList({
      pageNum: 1,
      pageSize: 1000,
      type: 0,
      adminUserId: this.page.tenantId,
    }).then(res => {
      const {list} = res.data
      this.guestGroupList = list || []
      if (this.guestGroupList.length > 0) this.$set(this.page, 'guestGroupId', this.guestGroupList[0].guestGroupId)
    })
    this.getTableData()

  },
  methods: {
    async getTableData() {
      const [startTime, endTime] = dateFormatSection(this.page.timeValue)
      const params = {
        ...this.page,
        startTime, endTime
      }
      delete params.timeValue
      this.loading = true
      const res = await remindListReport(params)
      if (res.code === 1) {
        const {total, list} = res.data
        this.tableData = list.list
        if (this.tableData.length > 0 && total) {
          this.tableData.unshift({
            ...total,
            dateStr: this.$t('合计')
          })
        } else {
          this.tableData = []
        }
        this.page.total = list.total
        this.loading = false
      } else {
        this.loading = false
      }
    },
    // 获取客群名称
    getGuestGroupList() {
      guestGroupList({
        pageNum: 1,
        pageSize: 1000,
        type: 0,
        adminUserId: this.page.tenantId,
      }).then(res => {
        const {list} = res.data
        this.guestGroupList = list || []
        this.$set(this.page, 'guestGroupId', null)
      })
    },
    // 获取提醒经理
    getManager() {
      this.$permiss[1598] && guestGroupBindList({
        pageSize: 100,
        adminRole: 8,
        guestGroupId: this.page.guestGroupId
      }).then(res => {
        this.remindManagerList = res.data.list
        this.$set(this.page, 'managerId', null)
      })
    },
    // 获取提醒员
    getPersonnel() {
      this.$permiss[1359] && guestGroupBindList({
        pageSize: 100,
        adminRole: 9,
        managerId: this.page.managerId
      }).then(res => {
        this.auditPersonnelList = res.data.list
        this.$set(this.page, 'adminUserId', null)
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    async exportExcel() {
      this.exportsLoading = true;
      const [startTime, endTime] = dateFormatSection(this.page.timeValue)
      const params = {
        ...this.page,
        startTime, endTime
      }
      delete params.timeValue
      const res = await remindReportExport(params);
      if (res.code === 1) {
        const headerData = [...this.tableColumn].filter(item => {
          const result = res.data.filter(i => {
            //过滤没有权限的字段
            return typeof i[item.prop] !== "undefined"
          })
          return result.length !== 0
        })
        const column = headerData.map(item => item.label)
        const filterVal = headerData.map(item => item.prop)
        const list = [...res.data].map((v) => filterVal.map((j) => v[j]));
        const fileName = this.$t("提醒人效表");
        export_json_to_excel({
          header: column,
          data: list,
          filename: fileName,
        });
        this.exportsLoading = false;
      } else {
        this.exportsLoading = false;
      }
    },
    clearSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getTableData()
    }
  }
}
</script>

<style scoped>

</style>
